<template>
  <div v-loading="loading" class="dialog">
    <div class="title">非信创资源申请</div>
    <!-- <div style="margin-bottom: 10px">
            <label style="margin-right: 20px">服务商: </label>
            <el-radio
                v-for="(item, index) in configure.cloud_service_provider"
                @change="cloudServiceChange"
                :key="index"
                v-model="form.cloudSupplier"
                :label="item.dictValue"
            >
                {{ item.dictLabel }}</el-radio
            >
        </div> -->
    <el-dialog
      :title="addShow == 1 ? '新增非信创资源' : '修改非信创资源'"
      :visible.sync="addShow"
      width="70%"
      :addShow="addShow"
      append-to-body
    >
      <div style="max-height: 90vh; overflow-y: scroll">
        <AddBdialog
          ref="addBdialog"
          :configure="configure"
          :hosts="hosts"
          :supplierCode="supplierCode"
          @addTable="addTable"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.addBdialog.submit()">确 定</el-button>
        <el-button @click="addShow = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-button type="primary" style="padding: 10px 40px" @click="showAdd(1, false)">新增</el-button>
    <div class="wrap">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <div style="padding: 20px 20px; width: 100%; max-height: 500px; overflow-y: scroll">
        <el-table :data="form.hosts" style="width: 100%; margin-top: 13px">
          <el-table-column label="资源类型">
            <template slot-scope="scope">
              {{
                scope.row.flavorType == 1
                  ? "云服务器"
                  : scope.row.flavorType == 2
                  ? "高性能服务器"
                  : scope.row.serverCode
                  ? "数据库"
                  : "存储产品"
              }}
            </template>
          </el-table-column>
          <el-table-column label="实例名称">
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType">{{ scope.row.hostName }}</span>
              <span v-else-if="scope.row.serverCode">{{ scope.row.hostInstanceName }}</span>
              <span v-else-if="!scope.row.hostInstanceNames.length"></span>
              <div v-else style="margin-bottom: 6px" v-for="(item, index) in scope.row.hostInstanceNames" :key="index">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="可用域">
                        <template slot-scope="scope">
                            {{scope.row.availableDomain_label}}
                        </template>
                    </el-table-column> -->
          <el-table-column label="规格分类/资源类型">
            <template slot-scope="scope">
              {{ scope.row.cloudFlavorCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope">
              <div v-if="scope.row.flavorType == 1">
                {{ scope.row.cpuNumber }}vCPU； {{ scope.row.memorySize }}G内存
              </div>
              <div v-if="scope.row.flavorType == 2">{{ scope.row.cloudFlavorCode_desc }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作系统版本">
            <template slot-scope="scope">
              <div>{{ scope.row.osName || osName(scope.row.osServerCode[0]) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="数据盘" width="300">
            <template slot-scope="scope">
              <div v-if="scope.row.flavorType" placement="top-start" width="500" trigger="hover">
                <div v-if="scope.row.flavorType == 1 && scope.row.disks">
                  <div style="margin-bottom: 6px">
                    <label>
                      (共<span style="color: #e83112">{{ scope.row.disks.length }}</span
                      >块){{ scope.row.disks.length ? ":" : "" }}</label
                    >
                  </div>
                  <div style="margin: 0 0 6px 16px" v-for="(item, index) in scope.row.disks" :key="index">
                    <span>{{ item.diskServerCode_label || item.diskServerName }}</span
                    >，{{ item.dataDiskSize }}GB
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="del(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.databases" style="width: 100%; margin-top: 13px">
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row.serverCode_label }}</span>
            </template>
          </el-table-column>
          <el-table-column label="版本">
            <template slot-scope="scope">
              <span>{{ scope.row.databaseVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位数">
            <template slot-scope="scope">
              <span>{{ scope.row.systemDigits }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del(scope.row, scope.$index + form.hosts.length)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.storeProducts" style="width: 100%; margin-top: 13px">
          <el-table-column label="磁盘类型">
            <template slot-scope="scope">
              {{ scope.row.diskServerCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="磁盘用量">
            <template slot-scope="scope">
              <span> {{ scope.row.dataDiskSize }}GB </span>
            </template>
          </el-table-column>
          <el-table-column label="存储类型">
            <template slot-scope="scope">
              <span> {{ scope.row.productCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务类型">
            <template slot-scope="scope">
              <span> {{ scope.row.diskCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务器">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.hostIds" :key="index">{{ gethostName(item) }}</div>
            </template>
          </el-table-column>

          <el-table-column label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del(scope.row, scope.$index + form.hosts.length + form.databases.length)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>安全产品</div>
      </div>
      <div style="padding: 20px 20px">
        <div class="wrap_item" style="margin-top: 0; display: block">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
            >全选
          </el-checkbox>
          <div style="margin: 15px 0"></div>
          <el-checkbox-group v-model="form.aqchecked" @change="handleCheckedChange">
            <el-checkbox v-for="(item, index) in configure.yyaqList" :label="item.code" :key="item.code"
              >{{ item.serviceName }}
              <el-input
                type="number"
                size="mini"
                min="1"
                style="width: 100px; margin-bottom: 10px"
                placeholder="数量"
                v-model="form.aqcheckedCount[index]"
              />
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>其他</div>
      </div>
      <div style="padding: 10px 20px">
        <div class="wrap_item" style="margin-top: 0">
          <div style="line-height: 28px">说明:</div>
          <div style="width: 80vw">
            <el-input
              type="textarea"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入说明"
              v-model="form.remark"
            >
            </el-input>
          </div>
        </div>
        <div class="wrap_item" style="width: 100%">
          <div style="line-height: 28px">文件:</div>
          <!-- -card -->
          <el-upload
            class="upload-demo"
            style="display: block"
            accept
            list-type="picture"
            :show-file-list="false"
            ref="upload"
            :file-list="form.fileList"
            action=""
            :on-preview="handlePictureCardPreview"
            :on-remove="handleChange"
            :on-change="handleChange"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
          <br />
          <div>
            <el-table :data="form.fileList" style="margin-left: 20px; width: 50vw">
              <el-table-column label="文件名称">
                <template slot-scope="scope">
                  {{ scope.row.name.substring(0, scope.row.name.lastIndexOf(".")) }}
                </template>
              </el-table-column>
              <el-table-column label="文件类型">
                <template slot-scope="scope">
                  {{ scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1, scope.row.name.length) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(scope.row)"
                    >预览
                  </el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="DeleteFile(scope.row, scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddBdialog from "./addBdialog.vue";
import { hosts } from "@/api/cloud/cloud";
import { uploadFile } from "@/api/system/upload.js";
import { v4 as uuidv4 } from "uuid";
export default {
  name: "addB",
  components: {
    AddBdialog,
  },
  props: {
    configure: {
      type: Object,
      default: {
        available_domain: [], //可用域
        cloud_service_provider: [], //服务商
        storage_type: [], //系统盘类型
        codeList: [], //云服务器规格列表
        czxtList: [], //操作系统列表
        ccList: [], //数据盘类型
        fwcpList: [], //服务型磁盘类型
        wlfwqList: [], //高性能服务器资源类型
        sjkList: [], //数据库类型
        yyaqList: [], //安全产品
      },
    },
    supplierCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      addShow: false,
      index: 0,
      yyaqList: null,
      //数据
      form: {
        cloudSupplier: undefined, //服务商
        hosts: [], //服务器列表
        databases: [], //数据库列表
        storeProducts: [], //存储产品列表
        aqchecked: [], //安全产品
        aqcheckedCount: [],
        safeProducts: [], //安全产品真实数据
        remark: "", //说明
        fileList: [],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      isIndeterminate: false,
      checkAll: false,
      SelectedcloudServiceName: "",
      SelectedcloudService: "",
      cloudUpId: "",
      // 暂时上级传递的主机数据
      hosts: [],
      hostsIndex: 0,
    };
  },
  created() {
    for (let i = 0; i < 100; i++) {
      this.form.aqcheckedCount.push(1);
    }
  },
  methods: {
    gethostName(id) {
      let name = "";
      this.form.hosts.some((item) => {
        if (item.id == id) {
          name = item.hostName;
          return true;
        }
      });
      return name;
    },
    osName(code) {
      let serviceName;
      this.configure.czxtList.forEach((item) => {
        if (item.code == code) {
          serviceName = item.serviceName;
        }
      });
      return serviceName;
    },
    cloudServiceChange(value) {
      if (!this.SelectedcloudService) {
        return;
      }
      let SelectedcloudServiceName;
      let cloudService = this.SelectedcloudService;
      if (!this.SelectedcloudService) {
        this.form.cloudSupplier = value;
        this.SelectedcloudService = value;
        return;
      } else {
        this.configure.cloud_service_provider.forEach((item) => {
          if (item.dictValue == this.SelectedcloudService) {
            SelectedcloudServiceName = item.dictLabel;
          }
        });
        this.$confirm(`您已经在${SelectedcloudServiceName}申请过资源，是否要在新的云服务商申请资源？`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.form.cloudSupplier = value;
            this.SelectedcloudService = value;
          })
          .catch(() => {
            this.form.cloudSupplier = cloudService;
          });
      }
    },
    previewFile(item) {
      if (
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpeg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "png"
      ) {
        this.dialogImageUrl = item.url;
        this.dialogVisible = true;
        return;
      } else {
        this.$message.error(`仅限后缀名为 gif、jpeg、jpg、 png可预览`);
      }
    },
    DeleteFile(data, index) {
      this.form.fileList = this.form.fileList.filter((item) => {
        if (item.uid == data.uid) {
        } else {
          return item;
        }
      });
    },
    DefaultServiceProvider(n) {
      if (n.detailMap) {
        this.cloudUpId = n.cloudUpId;
        hosts(n.cloudUpId).then((res) => {
          this.hostsIndex = res.data.length;
          this.hosts = this.form.hosts.concat(res.data);
        });
        for (let item in n.detailMap) {
          if (n.detailMap[item].haveResource == true) {
            this.form.cloudSupplier = n.detailMap[item].supplierCode;
            this.SelectedcloudService = n.detailMap[item].supplierCode;
            return;
          }
        }
      } else {
        this.form.cloudSupplier = undefined;
        this.SelectedcloudService = undefined;
      }
    },
    //文件预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //文件列表变化
    handleChange(res, fileList) {
      this.form.fileList = fileList;
    },
    next() {
      let text = "";
      if (this.hosts.length == 0 || this.form.hosts.length == 0) {
        this.$message({
          message: "请至少新增一台服务器",
          type: "error",
        });
      } else {
        let safeProducts = [],
          hostIds = this.hosts.map((item) => {
            return item.id;
          });
        this.form.aqchecked.forEach((item) => {
          this.configure.yyaqList.forEach((it, index) => {
            if (it.code == item) {
              let count = parseInt(this.form.aqcheckedCount[index]);
              if (!count || count > 100) {
                text = "安全产品数量应当为1~100";
              } else {
                for (let i = 0; i < count; i++) {
                  safeProducts.push({
                    productCode: it.code,
                    productName: it.serviceName,
                    hostIds,
                  });
                }
              }
            }
          });
        });
        if (text) {
          this.$message({
            message: text,
            type: "error",
          });
          return;
        }
        this.form.safeProducts = safeProducts;
        this.configure.cloud_service_provider.some((item) => {
          if (item.dictValue == this.form.cloudSupplier) {
            this.form.cloudSupplier_label = item.dictLabel;
            return true;
          }
        });
        this.$emit("next", this.form);
      }
    },
    //添加修改表格
    addTable(data) {
      data = JSON.parse(JSON.stringify(data));
      if (data.flavorType) {
        this.addHosts(data);
      } else if (data.serverCode) {
        this.addDatabases(data);
      } else {
        this.addStoreProducts(data);
      }
    },
    //添加存储产品列表
    addStoreProducts(data) {
      this.configure[data.productCode == "共享型" ? "ccList" : "fwcpList"].some((it) => {
        if (it.code == data.diskServerCode) {
          data.diskServerCode_label = it.serviceName;
          return true;
        }
      });
      let storeProducts = JSON.parse(JSON.stringify(this.form.storeProducts));
      if (this.addShow == 2) {
        storeProducts[this.index] = data;
      } else {
        storeProducts.push(data);
      }
      this.form.storeProducts = storeProducts;
      this.addShow = false;
    },
    //添加修改数据库列表
    addDatabases(data) {
      //数据库类型
      this.configure.sjkList.some((it) => {
        if (it.code == data.serverCode) {
          data.serverCode_label = it.serviceName;
          return true;
        }
      });
      let databases = JSON.parse(JSON.stringify(this.form.databases));
      if (this.addShow == 2) {
        databases[this.index] = data;
      } else {
        databases.push(data);
      }
      this.form.databases = databases;
      this.addShow = false;
    },
    //添加修改服务器列表
    addHosts(data) {
      //可用域
      this.configure.available_domain.some((item) => {
        if (item.dictValue == data.availableDomain) {
          data.availableDomain_label = item.dictLabel;
          return true;
        }
      });
      // this.configure.codeList.some((item) => {
      //     if (data.cloudFlavorCode == item.specCode) {
      //         item.details.forEach((it) => {
      //             if (it.serviceCode == "vcpu") {
      //                 data.cpuNumber = it.serviceCount;
      //                 data.cpuServerCode = it.serviceCode;
      //             }
      //             if (it.serviceCode == "memory") {
      //                 data.memorySize = it.serviceCount;
      //                 data.memoryServerCode = it.serviceCode;
      //             }
      //         });
      //         return;
      //     }
      // });
      //数据盘类型
      data.disks.forEach((item) => {
        this.configure.ccList.some((it) => {
          if (it.code == item.diskServerCode) {
            item.diskServerCode_label = it.serviceName;
            return true;
          }
        });
      });
      if (data.flavorType == 1) {
        //系统盘类型
        this.configure.storage_type.some((item) => {
          if (item.code == data.osDisk.diskServerCode) {
            data.osDisk.diskServerCode_label = item.serviceName;
            return true;
          }
        });
        //规格
        this.configure.codeList.some((item) => {
          if (item.specCode == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.specName;
            data.cloudFlavorCode_desc = item.desc;
            return true;
          }
        });
      }
      if (data.flavorType == 2) {
        this.configure.wlfwqList.some((item) => {
          if (item.code == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.serviceName;
            data.cloudFlavorCode_desc = item.remark;
            return true;
          }
        });
      }
      let hosts = JSON.parse(JSON.stringify(this.form.hosts));
      if (this.addShow == 2) {
        if (data.hostName && data.hostName == data.instanceName + "_" + data.num) {
          hosts[this.index] = data;
          this.hosts[Number(this.index) + Number(this.hostsIndex)] = data; //新增公共服务器+历史服务器
        } else {
          hosts.splice(this.index, 1);
          this.hosts.splice(Number(this.index) + Number(this.hostsIndex), 1);
          let sum = 0;
          hosts.forEach((item) => {
            if (item.instanceName == data.instanceName && item.num > sum) {
              sum = item.num;
            }
          });
          ////新增公共服务器+历史服务器
          this.hosts.forEach((item) => {
            if (item.instanceName == data.instanceName && item.num > sum) {
              sum = item.num;
            }
          });
          data.num = sum + 1;
          data.hostName = data.instanceName + "_" + data.num;
          hosts.push(data);
          //新增公共服务器+历史服务器
          this.hosts.push(data);
        }
      } else {
        let num = Number(data.instanceNum);
        data.instanceNum = 1;
        let sum = 0;
        hosts.forEach((item) => {
          if (item.instanceName == data.instanceName && item.num > sum) {
            sum = item.num;
          }
        });
        //新增公共服务器+历史服务器
        this.hosts.forEach((item) => {
          if (item.instanceName == data.instanceName && item.num > sum) {
            sum = item.num;
          }
        });
        for (let i = 0; i < num; i++) {
          let temp = JSON.parse(JSON.stringify(data));
          if (!temp.num) {
            temp.num = sum + i + 1;
          }
          temp.id = uuidv4();
          temp.hostName = temp.instanceName + "_" + temp.num;
          hosts.push(temp);
          this.hosts.push(temp);
        }
      }
      this.form.hosts = hosts;
      this.addShow = false;
    },
    //显示弹窗
    showAdd(num, data, index) {
      this.index = index;
      this.addShow = num;
      setTimeout(() => {
        this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)));
      }, 200);
    },
    //删除
    del(data, index) {
      if (index < this.form.hosts.length) {
        this.form.hosts.splice(index, 1);
        this.hosts.splice(index, 1);
        this.form.databases = this.form.databases.filter((item) => {
          return item.hostId != data.id;
        });
        this.form.storeProducts = this.form.storeProducts.filter((item) => {
          return (item.hostIds || item.id).indexOf(data.id) < 0;
        });
      } else if (index < this.form.hosts.length + this.form.databases.length) {
        this.form.databases.splice(index - this.form.hosts.length, 1);
      } else {
        this.form.storeProducts.splice(index - this.form.hosts.length - this.form.databases.length, 1);
      }
    },
    handleCheckAllChange(val) {
      if (!this.yyaqList) {
        this.yyaqList = this.configure.yyaqList.map((item) => {
          return item.code;
        });
      }
      this.form.aqchecked = val ? this.yyaqList : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.configure.yyaqList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.configure.yyaqList.length;
    },
  },
};
</script>
<style>
.el-form-item--medium .el-form-item__label {
  text-align: left !important;
}
</style>
<style scoped lang="less">
.dialog {
  margin-bottom: 30px;
  font-size: 12px;

  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }

  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }

      i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
      }
    }
  }

  .msg {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    border-radius: 10px;

    .wra2p {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      margin-left: 20px;
      width: calc(33.33% - 20px);
      min-width: 340px;
      display: flex;
    }
  }
}
</style>
